<template>
  <div class="add-document-container">
    <!-- 主要内容区域 -->
    <div class="content-container">
      <!-- 页面标题 -->
      <div class="page-title-section">
        <h1 class="page-title">添加文档到知识库</h1>
        <div class="knowledge-base-info" v-if="knowledgeBaseName">
          <span>当前知识库：</span>
          <span class="kb-name">{{ knowledgeBaseName }}</span>
        </div>
      </div>

      <!-- 模式切换 -->
      <div class="mode-switch">
        <n-radio-group v-model:value="inputMode" name="input-mode" button-style="solid" size="large">
          <n-radio-button value="text">文本输入</n-radio-button>
          <n-radio-button value="file">文件上传</n-radio-button>
        </n-radio-group>
      </div>

      <!-- 文本输入模式 -->
      <div v-if="inputMode === 'text'" class="text-input-section">
        <n-form :model="textForm" :rules="formRules" label-placement="left" label-width="auto">
          <n-form-item label="文档标题" path="title">
            <n-input
              v-model:value="textForm.title"
              placeholder="请输入文档标题"
              size="large"
            />
          </n-form-item>
          <n-form-item label="文档内容" path="content">
            <div class="text-input-container">
              <n-input
                v-model:value="textForm.content"
                type="textarea"
                placeholder="请输入文档内容（支持Markdown格式）"
                :autosize="{ minRows: 10, maxRows: 20 }"
                size="large"
                @input="updateMarkdownPreview"
                class="full-width-input"
              />
              <div class="markdown-preview-section">
                <div class="preview-header">
                  <n-icon><EyeOutline /></n-icon>
                  <span>Markdown预览</span>
                </div>
                <div class="markdown-preview full-width-preview" v-html="markdownPreview"></div>
              </div>
            </div>
          </n-form-item>
        </n-form>
      </div>

      <!-- 文件上传模式 -->
      <div v-else class="file-upload-section">
        <n-form :model="fileForm" :rules="formRules" label-placement="left" label-width="auto">
          <n-form-item label="文档标题" path="title">
            <n-input
              v-model:value="fileForm.title"
              placeholder="请输入文档标题（留空将使用文件名）"
              size="large"
            />
          </n-form-item>
          <n-form-item label="选择文件" path="file">
            <div class="upload-area" :class="{ 'drag-over': isDragOver }" 
                 @drop="handleDrop" 
                 @dragover.prevent="handleDragOver" 
                 @dragleave="handleDragLeave"
                 @click="triggerFileInput">
              <input 
                type="file" 
                ref="fileInputRef" 
                @change="handleFileChange" 
                style="display: none"
                accept=".txt,.md,.doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.csv,.json,.jpg,.jpeg,.png,.gif"
              />
              <div v-if="!uploadFile" class="upload-placeholder">
                <n-icon size="48"><CloudUploadOutline /></n-icon>
                <div class="upload-text">
                  <p>拖拽文件到此处或 <a @click="triggerFileInput">点击选择文件</a></p>
                  <p class="upload-hint">支持文本、Markdown、Office文档、PDF、CSV、JSON和图片文件</p>
                </div>
              </div>
              <div v-else class="upload-file">
                <n-icon size="32"><DocumentAttachOutline /></n-icon>
                <div class="upload-file-info">
                  <div class="upload-file-name">{{ uploadFile.name }}</div>
                  <div class="upload-file-size">{{ formatFileSize(uploadFile.size) }}</div>
                </div>
                <n-button circle quaternary @click.stop="clearUploadFile">
                  <template #icon>
                    <n-icon><CloseOutline /></n-icon>
                  </template>
                </n-button>
              </div>
            </div>
          </n-form-item>
        </n-form>

        <!-- 内容预览区域 -->
        <div v-if="uploadFile" class="content-preview-section">
          <div class="preview-header">
            <n-icon><EyeOutline /></n-icon>
            <span>内容预览</span>
            <n-button size="small" @click.stop="togglePreview">
              <template #icon>
                <n-icon><ChevronDownOutline v-if="!showPreview" /><ChevronUpOutline v-else /></n-icon>
              </template>
              {{ showPreview ? '隐藏预览' : '显示预览' }}
            </n-button>
          </div>
          <div v-if="showPreview" class="content-preview">
            <div v-if="uploadFile && isMarkdownFile(uploadFile) && markdownPreview" class="preview-content markdown-preview" v-html="markdownPreview"></div>
            <div v-else-if="uploadFile && isTextFile(uploadFile) && documentContent" class="preview-content">
              <pre>{{ documentContent }}</pre>
            </div>
            <div v-else-if="uploadFile && !isTextFile(uploadFile) && documentContent" class="preview-content">
              <div class="non-text-file-preview">
                <p>{{ documentContent }}</p>
              </div>
            </div>
            <div v-else class="preview-loading">
              <n-spin size="small" />
              <span>正在加载预览...</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <n-button size="large" @click="goBack">
          <template #icon>
            <n-icon><ArrowBackOutline /></n-icon>
          </template>
          返回
        </n-button>
        <n-button 
          type="primary" 
          size="large" 
          @click="handleSaveDocument" 
          :loading="saving"
          :disabled="!canSave"
        >
          <template #icon>
            <n-icon><SaveOutline /></n-icon>
          </template>
          保存到知识库
        </n-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import { 
  ArrowBackOutline, 
  CloudUploadOutline, 
  DocumentAttachOutline, 
  CloseOutline, 
  EyeOutline, 
  ChevronDownOutline, 
  ChevronUpOutline, 
  SaveOutline 
} from '@vicons/ionicons5'
import { aiService } from '../../shared/services/ai-service'
import '@/styles/AddDocument.css'

const route = useRoute()
const router = useRouter()
const message = useMessage()

// 页面状态
const knowledgeBaseName = ref('')
const knowledgeBaseId = ref('')
const inputMode = ref<'text'|'file'>('file')
const saving = ref(false)

// 文本输入表单
const textForm = reactive({
  title: '',
  content: ''
})

// 文件上传表单
const fileForm = reactive({
  title: '',
  file: null as File | null
})

// 文件上传相关状态
const uploadFile = ref<File|null>(null)
const isDragOver = ref(false)
const showPreview = ref(false)
const documentContent = ref<string>('')
const markdownPreview = ref<string>('')
const fileInputRef = ref<HTMLInputElement|null>(null)
const uploadedFileInfo = ref<any>(null)

// 表单验证规则
const formRules = {
  title: {
    required: inputMode.value === 'text',
    message: '请输入文档标题',
    trigger: ['input', 'blur']
  },
  content: {
    required: inputMode.value === 'text',
    message: '请输入文档内容',
    trigger: ['input', 'blur']
  },
  file: {
    required: inputMode.value === 'file',
    validator: () => {
      return uploadFile.value !== null
    },
    message: '请选择要上传的文件',
    trigger: ['change', 'blur']
  }
}

// 计算属性：是否可以保存
const canSave = computed(() => {
  if (inputMode.value === 'text') {
    return textForm.title.trim() !== '' && textForm.content.trim() !== ''
  } else {
    return uploadFile.value !== null
  }
})

// 页面初始化
onMounted(() => {
  knowledgeBaseId.value = route.params.knowledgeId as string
  knowledgeBaseName.value = route.query.kbName as string || ''
})

// 返回上一页
function goBack() {
  router.go(-1)
}

// 更新Markdown预览
function updateMarkdownPreview() {
  if (textForm.content) {
    markdownPreview.value = renderMarkdown(textForm.content)
  } else {
    markdownPreview.value = ''
  }
}

// 简单的Markdown渲染函数
function renderMarkdown(content: string): string {
  return content
    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.+?)\*/g, '<em>$1</em>')
    .replace(/`(.+?)`/g, '<code>$1</code>')
    .replace(/\n\n/g, '</p><p>')
    .replace(/^\s*(.+?)\s*$/gm, '<p>$1</p>')
    .replace(/<p><\/p>/g, '')
    .replace(/<p>(<h[1-6]>)/g, '$1')
    .replace(/(<\/h[1-6]>)<\/p>/g, '$1')
}

// 格式化文件大小
function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 检查是否为文本类型文件
function isTextFile(file: File): boolean {
  const fileExt = file.name.split('.').pop()?.toLowerCase()
  const textExtensions = ['txt', 'md', 'csv', 'json', 'html', 'htm', 'xml', 'log']
  return textExtensions.includes(fileExt || '')
}

// 检查是否为Markdown文件
function isMarkdownFile(file: File): boolean {
  const fileExt = file.name.split('.').pop()?.toLowerCase()
  return fileExt === 'md' || fileExt === 'markdown'
}

// 触发文件选择
function triggerFileInput() {
  const fileInput = fileInputRef.value
  if (fileInput) {
    fileInput.click()
  }
}

// 清除上传文件
function clearUploadFile() {
  uploadFile.value = null
  documentContent.value = ''
  markdownPreview.value = ''
  showPreview.value = false
  uploadedFileInfo.value = null
}

// 处理拖拽悬停
function handleDragOver(e: DragEvent) {
  e.preventDefault()
  isDragOver.value = true
}

// 处理拖拽离开
function handleDragLeave(e: DragEvent) {
  e.preventDefault()
  isDragOver.value = false
}

// 处理文件拖放
function handleDrop(e: DragEvent) {
  e.preventDefault()
  isDragOver.value = false
  
  const files = e.dataTransfer?.files
  if (files && files.length > 0) {
    const file = files[0]
    const fileExt = file.name.split('.').pop()?.toLowerCase()
    const supportedTypes = ['txt', 'md', 'doc', 'docx', 'pdf', 'xls', 'xlsx', 'ppt', 'pptx', 'csv', 'json', 'jpg', 'jpeg', 'png', 'gif']
    
    if (fileExt && supportedTypes.includes(fileExt)) {
      uploadFile.value = file
      
      // 设置文件名为标题（如果标题为空）
      if (!fileForm.title) {
        fileForm.title = file.name
      }
      
      // 显示预览区域
      showPreview.value = true
      
      // 对于文本文件，直接使用FileReader读取
      if (isTextFile(file)) {
        loadFileContent(file).then(() => {
          // 文本内容加载完成后，调用handleUpload上传文件
          handleUpload()
        })
      } else {
        // 对于非文本文件，显示提示信息，等待上传后由后端提取内容
        documentContent.value = `文件 "${file.name}" 将在上传后由后端提取文本内容...`
        markdownPreview.value = `<p>文件 "${file.name}" 将在上传后由后端提取文本内容...</p>`
        // 调用handleUpload上传文件
        handleUpload()
      }
    } else {
      message.error(`不支持的文件类型: .${fileExt}，请上传支持的文件类型`)
    }
  }
}

// 处理文件选择
function handleFileChange(e: Event) {
  const files = (e.target as HTMLInputElement).files
  if (files && files.length > 0) {
    const file = files[0]
    const fileExt = file.name.split('.').pop()?.toLowerCase()
    const supportedTypes = ['txt', 'md', 'doc', 'docx', 'pdf', 'xls', 'xlsx', 'ppt', 'pptx', 'csv', 'json', 'jpg', 'jpeg', 'png', 'gif']
    
    if (fileExt && supportedTypes.includes(fileExt)) {
      uploadFile.value = file
      
      // 设置文件名为标题（如果标题为空）
      if (!fileForm.title) {
        fileForm.title = file.name
      }
      
      // 显示预览区域
      showPreview.value = true
      
      // 对于文本文件，直接使用FileReader读取
      if (isTextFile(file)) {
        loadFileContent(file).then(() => {
          // 文本内容加载完成后，调用handleUpload上传文件
          handleUpload()
        })
      } else {
        // 对于非文本文件，显示提示信息，等待上传后由后端提取内容
        documentContent.value = `文件 "${file.name}" 将在上传后由后端提取文本内容...`
        markdownPreview.value = `<p>文件 "${file.name}" 将在上传后由后端提取文本内容...</p>`
        // 调用handleUpload上传文件
        handleUpload()
      }
    } else {
      message.error(`不支持的文件类型: .${fileExt}，请上传支持的文件类型`)
    }
  }
}

// 加载文件内容
async function loadFileContent(file: File) {
  try {
    // 对于文本文件，直接使用FileReader读取
    if (isTextFile(file)) {
      const reader = new FileReader()
      reader.onload = (e) => {
        const content = e.target?.result as string
        documentContent.value = content
        
        // 如果是Markdown文件，同时渲染Markdown预览
        if (isMarkdownFile(file)) {
          markdownPreview.value = renderMarkdown(content)
        }
        
        // 确保预览区域显示
        showPreview.value = true
      }
      reader.readAsText(file, 'utf-8')
    } else {
      // 对于非文本文件（如Word、PDF等），显示提示信息，等待上传后由后端提取内容
      documentContent.value = `文件 "${file.name}" 将在上传后由后端提取文本内容...`
      markdownPreview.value = `<p>文件 "${file.name}" 将在上传后由后端提取文本内容...</p>`
      
      // 确保预览区域显示
      showPreview.value = true
    }
  } catch (error) {
    console.error('加载文件内容失败:', error)
    message.error('加载文件内容失败')
    documentContent.value = ''
    markdownPreview.value = '<p>加载内容失败</p>'
  }
}

// 切换预览显示
function togglePreview() {
  showPreview.value = !showPreview.value
  if (showPreview.value && uploadFile.value && isMarkdownFile(uploadFile.value)) {
    loadMarkdownPreview()
  }
}

// 加载Markdown预览
async function loadMarkdownPreview() {
  if (!uploadFile.value || !isMarkdownFile(uploadFile.value)) return
  
  try {
    const reader = new FileReader()
    reader.onload = (e) => {
      const content = e.target?.result as string
      markdownPreview.value = renderMarkdown(content)
    }
    reader.readAsText(uploadFile.value)
  } catch (error) {
    console.error('加载Markdown预览失败:', error)
    markdownPreview.value = '<p>加载预览失败</p>'
  }
}

// 上传文件
async function handleUpload() {
  if (!uploadFile.value) return
  
  try {
    const uploaderId = '1' 
    // 调用文件上传到知识库接口
    const res = await aiService.uploadFileToKnowledgeBase(knowledgeBaseId.value, uploaderId, uploadFile.value)
    if (res?.code === 0 && res.data) {
      // 存储上传后的文件信息
      uploadedFileInfo.value = res.data
      
      // 确保uploadedFileInfo包含必要的属性
      if (!uploadedFileInfo.value.originalFileName && uploadFile.value) {
        uploadedFileInfo.value.originalFileName = uploadFile.value.name
      }
      
      // 如果后端返回了提取的文本内容，则显示预览
      if (res.data.content) {
        documentContent.value = res.data.content
        // 如果是Markdown文件，同时渲染Markdown预览
        if (isMarkdownFile(uploadFile.value)) {
          markdownPreview.value = renderMarkdown(res.data.content)
        }
      } else {
        // 即使没有返回内容，也显示上传成功
        // 对于文本文件，如果没有返回内容，使用本地读取的内容
        if (isTextFile(uploadFile.value)) {
          // 文本文件内容已经在loadFileContent中加载了
          if (!documentContent.value) {
            documentContent.value = `文件 "${uploadFile.value.name}" 上传成功，但内容为空`
          }
        } else {
          // 非文本文件，显示等待处理的提示
          documentContent.value = `文件 "${uploadFile.value.name}" 上传成功，等待后端处理...`
          markdownPreview.value = `<p>文件 "${uploadFile.value.name}" 上传成功，等待后端处理...</p>`
        }
      }
    } else {
      message.error(res?.msg || '文件上传失败')
    }
  } catch (e) {
    console.error('上传错误:', e)
    message.error('文件上传失败')
  }
}

// 保存文档到知识库
async function handleSaveDocument() {
  if (inputMode.value === 'text') {
    await saveTextDocumentToKnowledgeBase()
  } else {
    await saveFileDocumentToKnowledgeBase()
  }
}

// 保存文本文档到知识库
async function saveTextDocumentToKnowledgeBase() {
  if (!textForm.content) {
    message.error('请输入文档内容')
    return
  }
  
  saving.value = true
  try {
    // 构建文档对象
    const document = {
      knowledgeBaseId: knowledgeBaseId.value,
      title: textForm.title || '未命名文档',
      content: textForm.content
    }
    
    // 调用document/add接口创建文本文档
    const res = await aiService.addTextDocumentToKnowledgeBase(document)
    
    if (res?.code === 0) {
      message.success('文档已成功保存到知识库，正在进行分片和向量化处理...')
      // 返回文档列表页面
      router.go(-1)
    } else {
      message.error(res?.msg || '添加文档失败')
    }
  } catch (e) {
    console.error('添加文档失败:', e)
    message.error('添加文档失败，请重试')
  } finally {
    saving.value = false
  }
}

// 保存文件文档到知识库
async function saveFileDocumentToKnowledgeBase() {
  if (!uploadedFileInfo.value) {
    message.error('请先上传文件')
    return
  }
  
  saving.value = true
  try {
    // 确保使用正确的文件名
    const fileName = uploadedFileInfo.value.originalFileName || 
                    uploadedFileInfo.value.fileName || 
                    uploadedFileInfo.value.name || 
                    uploadFile.value?.name || 
                    'unknown'
    
    // 确保使用正确的文件路径
    const filePath = uploadedFileInfo.value.filePath || 
                    uploadedFileInfo.value.path || 
                    ''
    
    // 确保使用正确的文件大小
    const fileSize = uploadedFileInfo.value.fileSize || 
                    uploadedFileInfo.value.size || 
                    0
    
    // 构建文档对象
    const document = {
      fileName,
      filePath,
      title: fileForm.title || fileName,
      fileSize,
      knowledgeBaseId: knowledgeBaseId.value
    }
    
    // 调用document/create-from-file接口创建文档
    const res = await aiService.createDocumentFromFile(document)
    
    if (res?.code === 0) {
      message.success('文档已成功保存到知识库，正在进行分片和向量化处理...')
      // 返回文档列表页面
      router.go(-1)
    } else {
      message.error(res?.msg || '添加文档失败')
    }
  } catch (e) {
    console.error('添加文档失败:', e)
    message.error('添加文档失败，请重试')
  } finally {
    saving.value = false
  }
}
</script>